<template>
    <div class="container">
        <div class="divider"></div>
        <div class="context">
            <h3>推荐课程</h3>
            <h4 @click="random">换一换</h4>
        </div>
        <div>
            <transition-group enter-active-class="animated fadeInRight" class="list" mode="out-in">
                <router-link tag="div" class="guess-item"
                             v-for="(item,index) in lists.slice(0,3)" 
                             :key="index"
                             :to="{ name:'singlebook',
                                    params:{
                                       classid:item.classId,
                                       title:item.grade_name,
                                       payid:item.classId,
                                       imgurl:item.imgurl,
                                       content:item.class_name,
                                       paytype:item.payType,
                                       totals:item.total_lessons
                                    }
                                 }" 
                >
                    <img :src="item.imgurl" alt="">
                </router-link>
            </transition-group>
        </div>
    </div>
</template>
<script>
export default {
    name: 'guess',
    data() {
        return {
            lists: [],
            listurl: 'http://www.jydsapp.com/jydsApi/api/h5/study/getIndexWordBook',
        }
    },
    created(){
        this.getData()
    },
    methods: {
        getData() {
            let str = `{}`
            this.fetch({
                method: 'post',
                url: this.listurl,
                params: {
                    "paramStr": str
                }
            }).then((data) => {
                if(data.data.code == 200){
                    this.lists = JSON.parse(data.data.data).wordBookList
                }else if (data.data.code == 103) {  //五天内未登录 token失效跳转到登陆页面
                    localStorage.removeItem('user')
                    this.$Toast({
                        content: '请重新登录'
                    })
                    this.$router.replace('/login')
                }else{
                    console.log(data.data.message)
                }
            }).catch((err) => {
                console.log(err)
            });
        },
        random() {
            let temp = this.lists
            this.lists = []
            setTimeout(()=>{
                this.lists = temp.sort(this.randomSort)
            },20)
        },
        randomSort(a, b){
            return Math.random() > 0.5 ? -1 : 1
        }
    }
}
</script>
<style lang="scss" scoped>
.container {
    height: 3.203704rem;
    padding-bottom: 0.595926rem;
    .divider {
        width: 100%;
        height: 12px;
        background: #eee;
        border-top: 1px solid #e6e6e6;
        border-bottom: 1px solid #e6e6e6;
    }
    .context,
    .list {
        padding: 0 0.555556rem;
    }
    .context {
        height: 1.111111rem;
        display: flex;
        justify-content: space-between;
        align-items: center;
        h4 {
            color: #666666;
        }
    }
    .list {
        display: flex;
        justify-content: space-between;
        .guess-item {
            flex: 1;
            &:nth-child(2) {
                margin: 0 10px;
            }
            img {
                width: 100%;
                border-radius: 5px;
            }
        }
    }
}

.animated {
    animation-duration: .5s
}
</style>
